<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>

        /* 自定义样式，使选择框像按钮 */
        /* 商品图片容器 */
        .image-container {
            position: relative;
            width: 180px;
            height: 180px;
            margin-bottom: 10px;
            border-radius: 8px;
            overflow: hidden;
        }

        /* 商品图片样式 */
        .product-image {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.3s ease;
        }

        /* 鼠标悬停图片放大效果 */
        .image-container:hover .product-image {
            transform: scale(1.05);
        }

        /* 商品名称悬浮层 */
        .product-name-overlay {
            position: absolute;
            bottom: -30px;
            left: 0;
            width: 100%;
            padding: 8px;
            background: rgba(0, 0, 0, 0.7);
            color: white;
            text-align: center;
            transition: bottom 0.3s ease;
            font-size: 14px;
        }

        /* 悬停时显示名称 */
        .image-container:hover .product-name-overlay {
            bottom: 0;
        }

        /* 调整商品容器高度适应新内容 */
        .product {
            width: 200px;
            height: 260px; /* 增加高度容纳按钮 */
            margin: 15px;
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 10px;
            transition: box-shadow 0.3s;
        }

        .product:hover {
            box-shadow: 0 4px 12px rgba(0,0,0,0.1);
        }

        .radio-button {
            display: inline-block;
            background-color: #4CAF50;
            color: white;
            padding: 10px 20px;
            border-radius: 5px;
            cursor: pointer;
            margin-right: 10px;
            font-size: 16px;
            transition: background-color 0.3s;
        }

        /* 当单选框被选中时，按钮样式的变化 */
        input[type="radio"]:checked + .radio-button {
            background-color: #45a049;
        }

        /* 当鼠标悬停在按钮上时 */
        .radio-button:hover {
            background-color: #3e8e41;
        }

        #Catalog input[type="submit"]:hover {
            color: #000;
            background-color: #54c07a;
            cursor:pointer;
        }

        #content{
            /*display: flex;*/
            width: 1300px;
            margin: 20px 0;
            padding: 20px 50px;
            border: 1px solid #555;
            border-radius: 12px;

        }

        .button-group {
            display: flex;
            flex-direction: column;  /* 让按钮竖直排列 */
            align-items: center;     /* 居中对齐 */
            margin-top: 10px;
        }

        .update-btn, .delete-btn {
            width: 80px;          /* 统一按钮宽度 */
            margin: 5px 0;        /* 增加上下间距 */
            padding: 8px 12px;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            font-size: 14px;
            transition: 0.3s;
            text-align: center;
        }

        .update-btn {
            background-color: #4CAF50;
            color: white;
        }

        .delete-btn {
            background-color: #f44336;
            color: white;
        }

        .update-btn:hover {
            background-color: #45a049;
        }

        .delete-btn:hover {
            background-color: #d32f2f;
        }
        .product {
            width: 200px;
            height: 200px;
            float: left;
            margin-top: 50px;
        }
        .clearfix::after {
            content: "";
            clear: both;
            display: table;
        }

       .image-container img{
            width:200px;
            height:200px;
            /*图片大小缩放*/
            object-fit: contain;
            /*图片缩放后不裁剪*/
            border-radius: 10px;
            /*图片圆角*/
            margin-right: 10px;


        }




    </style>
</head>
<body>


<header th:replace="common/cms_top"></header>
<div id="Catalog">


        <h2>Product</h2>

            <nav id="nav-radio">
                <a th:each="category : ${session.categoryList}" class="radio-button" th:href="@{/cmsCategoryForm(categoryId=${category.catid})}" th:text="${category.catid}">BIRDS</a>
            </nav>

        <div id="content">
            <div class="product" th:each="product : ${products}">
                <div class="image-container">


                    <a  th:utext="${product.image}"  th:href="@{/cmsProductForm(productId=${product.productid})}">

                    </a>


                    <!-- 鼠标悬停显示的商品名称 -->
                    <div class="product-name-overlay" th:text="${product.name}"></div>
                </div>
                <!-- 操作按钮组 -->
                <div class="button-group">
                    <a th:href="@{/cmsProductUpdateForm(productId=${product.productid})}">
                        <button class="update-btn"
                                th:data-productid="${product.productid}">Update</button>
                    </a>
                    <a th:href="@{/products/delete(productId=${product.productid},categoryId=${session.category.catid})}">
                        <button class="delete-btn"
                                th:data-productid="${product.productid}">Delete</button>
                    </a>

                </div>
            </div>
            <div style="clear: both;"></div>

        </div>
         <a style="font-size: 25px; color:black" th:href="@{/productAddForm(categoryId=${session.category.catid})}">Add New Product</a>




</div>
<footer th:replace="common/bottom"></footer>


</body>
</html>